<template>
  <div class="role-check scrollbar-wrap">
    <div class="role-check-head">
      <header-select ref="headerSelectRef" :level="3" :is-statement="true" @selectBuilding="getBuilding" @selectCheckTable="getCheckTable" @selectBuildingObject="selectBuildingObject" />
      <div class="legend">
        <div class="item">经</div><div class="des">项目经理</div>
        <div class="item">总</div><div class="des">项目总</div>
        <div class="item">工</div><div class="des">工程师</div>
        <div class="item">监</div><div class="des">监理</div>
      </div>
      <span class="type-tab">
        <el-tag class="tab">验收合格</el-tag>
        <el-tag class="tab" type="danger">验收不合格</el-tag>
        <el-tag class="tab" type="warning">待验收</el-tag>
      </span>
    </div>
    <el-scrollbar v-loading="loading" class="role-check-content" element-loading-text="拼命加载中">
      <el-card v-for="(floors, fsindex) in floorList" :key="'floors' + fsindex" class="box-card">
        <div slot="header">
          <div class="header">
            <span>第{{ floors.inspection.cfcheckbatch }}批次</span>
            <span>（</span>
            <span v-if="checktable.cfunittype !== 3">{{ floors.inspection.cfstartfloor }}层 — {{ floors.inspection.cfendfloor }}层</span>
            <span v-else>整栋</span>
            <span v-if="checktable.cfunittype === 2">，共{{ countRoom(floors.checkData) }}个房间</span>
            <span>）</span>
          </div>
        </div>
        <div v-for="(floor, findex) in floors.checkData" :key="'floor' + findex" style="margin-bottom: 10px;">
          <span v-if="checktable.cfunittype === 2">
            <check-room v-for="(room, rindex) in floor.rooms" :key="'room' + rindex" :room="room" @click.native="goCheckObjejct(room.roomId)" />
          </span>
          <check-floor
            v-else
            :prop-type="checktable.cfunittype"
            :building-name="currentBuilding.name"
            :floor="floor"
            @click.native="goCheckObjejct(checktable.cfunittype === 1 ? floor.floor : currentBuilding.id)"
          />
          <!--<check-floor v-else :propType= "0" :buildingName="currentBuilding.name" :floor="floor" />-->
        </div>
      </el-card>
      <div v-if="isEmpty" class="custom-is-empty">
        <el-empty description="暂无角色验收数据。" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import HeaderSelect from './components/HeaderSelect'
import CheckRoom from './components/CheckRoom'
import CheckFloor from './components/CheckFloor'
import { getKeyChecktableRole } from '@/api/statement/statement'
export default {
  name: 'RoleCheck',
  components: {
    HeaderSelect,
    CheckRoom,
    CheckFloor
  },
  data() {
    return {
      queryParams: {
        buildingId: '',
        checktableId: ''
      },
      floorList: [],
      checktable: {},
      loading: false,
      currentBuilding: {},
      isEmpty: false
    }
  },
  watch: {
    '$route.query'(val) {
      if (val.checkTableId !== undefined && val.checkTableId !== this.queryParams.checktableId) {
        this.queryParams.buildingId = val.buildingId
        this.queryParams.checktableId = val.checkTableId
        this.init()
      }
    }
  },
  created() { // 初始化
    this.queryParams.buildingId = this.$route.query.buildingId
    this.queryParams.checktableId = this.$route.query.checkTableId
    // if (process.env.NODE_ENV === 'development') { // 测试使用
    //   this.queryParams.buildingId = 'x9oAAAADbAsVnG6P'
    //   this.queryParams.checktableId = 'x9oAAACbTepC0JIj'
    // }
    this.init()
  },

  methods: {
    goCheckObjejct(id) {
      this.$router.push({ path: '/statement/CheckList', query: {
        buildingId: this.$route.query.buildingId,
        checktableId: this.$route.query.checkTableId,
        objectId: id
      }})
    },
    getBuilding(buildingId) {
      this.queryParams.buildingId = buildingId
      this.init()
    },
    getCheckTable(checkTable) {
      this.queryParams.checktableId = checkTable.checkTableId
      this.init()
      this.$eventBus.$emit('checkTableChange', checkTable)
      const query = { ...this.$route.query }
      query.checkTableId = checkTable.checkTableId
      this.$router.replace({ path: '/statement/RoleCheck', query: query })
    },
    selectBuildingObject(building) {
      this.currentBuilding = building
    },
    init() {
      this.loading = true
      getKeyChecktableRole(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            this.floorList = response.data.data
            this.checktable = response.data.checktable
            this.isEmpty = response.data.data.length === 0
          }
        }
      ).catch(() => {
        this.floorList = []
        this.isEmpty = true
      }).finally(() => {
        this.loading = false
      })
    },
    // 计算房间数量
    countRoom(floors) {
      let count = 0
      for (let i = 0; i < floors.length; i++) {
        if (floors[i].rooms) {
          count = count + floors[i].rooms.length
        }
      }
      return count
    }
  }
}
</script>

<style scoped lang='scss'>
  .role-check {
    margin: 10px 20px;
    .role-check-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .legend {
        display: inline-block;
        font-size: 13px;
        div {
          display: inline-block;
        }
        .item {
          background-color: #ecf5ff;
          color: #409EFF;
          height: 20px;
          line-height: 20px;
          width: 20px;
          text-align: center;
          border-radius: 10px;
          margin: 0 6px 0 30px;
        }
        .des {
          color: #909399;
        }
      }
      .type-tab {
        .tab {
          margin-left: 10px;
        }
      }
    }
    .role-check-content {
        margin-top: 10px;
        height: calc(100vh - 150px);
        .box-card {
          margin-bottom: 10px;
        }
        .header {
          font-size: 12px;
          span:nth-child(1) {
            font-size: 14px;
            font-weight: bold;
          }
          span:nth-child(2) {
            margin-left: 20px;
          }
        }
      }
  }

</style>
